<template>
  <div class="content app-content">
    <div class="header">
      <div class="header-color">
        <GradientColorCard
          v-for="item in countData1"
          :key="item.name"
          class="user-OrderCardColor"
          :icon="item.icon"
          :right-top="item.rightTop"
          :backgroundcolor="item.color"
          :backgroundimage="item.backgroundimage"
          :name="item.name"
          :value="item.value"
          :unit="item.unit"
        />
      </div>
    </div>
    <el-row :gutter="12" class="box1">
      <el-col :span="8">
        <card title="调入信息" :headstyle="cardstyle" shadow="nerver">
          <div class="box1-card">
            <TonsCard
              v-for="(t, i) of [jgList[0]]"
              :key="i"
              :style="`width:${95 / 2}%`"
              :name="t.name"
              :value="t.value"
              :unit="'万吨'"
              :valuebot="`${t.value1}`"
              :namebot="'昨 / 今'"
              :unitbot="'吨'"
            />
            <div class="box1-bar">
              <div class="box1-bar-item">
                <span class="name">当月卸量</span>
                <span class="value">{{ jgList[0].xcl }}</span>
                <span class="unit">万吨</span>
              </div>
              <div class="box1-bar-item">
                <span class="name">当月艘次</span>
                <span class="value">{{ jgList[0].sc }}</span>
                <span class="unit">艘</span>
              </div>
              <div class="box1-bar-item">
                <span class="name">当月同比</span>
                <span class="value">{{ jgList[0].tb }}</span>
                <span class="unit">%</span>
                <span class="jt" :class="jtclass(jgList[0].tb)">→</span>
              </div>
              <div class="box1-bar-item">
                <span class="name">当月环比</span>
                <span class="value">{{ jgList[0].hb }}</span>
                <span class="unit">%</span>
                <span class="jt" :class="jtclass(jgList[0].hb)">→</span>
              </div>
            </div>
          </div>
        </card>
      </el-col>
      <el-col :span="16">
        <card title="调出信息" :headstyle="cardstyle" shadow="nerver">
          <div class="box1-card">
            <TonsCard
              v-for="(t, i) of sgList"
              :key="i"
              :style="`width:${95 / sgList.length}%;height:${height}px`"
              :name="t.name"
              :value="t.value"
              :unit="'万吨'"
              :valuebot="`${t.value1}`"
              :namebot="'昨 / 今'"
              :unitbot="'吨'"
            >
              <!-- <div slot="title">
                {{ t.name }}
                <span v-show="t.value2">
                  <span style="color: #000">{{ t.value2 }}</span>
                  <span style="font-size: 11px"> 艘</span>
                </span>
              </div> -->
            </TonsCard>
          </div>
        </card>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="8">
        <card title="卸船量" :headstyle="cardstyle" shadow="nerver">
          <v-chart
            class="chart"
            :style="`height:${echartsHeight}px`"
            :option="xclchart"
            autoresize
          />
        </card>
      </el-col>
      <el-col :span="8">
        <card title="调出量" :headstyle="cardstyle" shadow="nerver">
          <v-chart
            class="chart"
            :style="`height:${echartsHeight}px`"
            :option="nddcchart"
            autoresize
          />
        </card>
      </el-col>
      <el-col :span="8">
        <card title="标准作业线" :headstyle="cardstyle" shadow="nerver">
          <bzzyx :options="options1" />
        </card>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="8">
        <card title="市场份额" :headstyle="cardstyle" shadow="nerver">
          <scfe :height="height" />
        </card>
      </el-col>
      <el-col :span="8">
        <card title="出库方式" :headstyle="cardstyle" shadow="nerver">
          <v-chart
            class="chart"
            :style="`height:${echartsHeight}px`"
            :option="VChartoptions"
            autoresize
          />
        </card>
      </el-col>
      <el-col :span="8">
        <card title="船舶动态" :headstyle="cardstyle" shadow="nerver">
          <iframe
            src="/api/home/home_ship_table_zs.html?timestamp=1682349929000"
            height="245"
            width="100%"
            frameborder="0"
            style="overflow: hidden"
          ></iframe>
        </card>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="8">
        <card title="泊位利用率" :headstyle="cardstyle" shadow="nerver">
          <bwlyl :height="height" />
        </card>
      </el-col>
      <el-col :span="8">
        <card title="卸船效率" :headstyle="cardstyle" shadow="nerver">
          <v-chart
            class="chart"
            :style="`height:${echartsHeight}px`"
            :option="xcchart"
            autoresize
          />
        </card>
      </el-col>
      <el-col :span="8">
        <card title="装火车效率" :headstyle="cardstyle" shadow="nerver">
          <v-chart
            class="chart"
            :style="`height:${echartsHeight}px`"
            :option="hcchart"
            autoresize
          />
        </card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 固定高度
const height = 250;
const columns1 = [
  {
    label: "动态",
    prop: "EFORMVALUE",
    minwidth: "60",
  },
  {
    label: "船名/航次",
    prop: "SHIPNAME",
    minwidth: "100",
  },
  {
    label: "配载吨",
    prop: "STOWAGETON",
    minwidth: "70",
  },
  {
    label: "预抵时间",
    prop: "PLANARRIVETIME",
    minwidth: "110",
    formatter(row, index) {
      return row.PLANARRIVETIME.substring(5, 16);
    },
  },
  {
    label: "装卸",
    prop: "ZXTYPE",
    minwidth: "70",
  },
];
const columns2 = [
  {
    label: "月份",
    prop: "PLANMONTH",
    minwidth: "70",
  },
  {
    label: "市场卸船",
    prop: "XCSJ",
    minwidth: "100",
  },
  {
    label: "八方卸船",
    prop: "BFXC",
    minwidth: "70",
  },
  {
    label: "占有率",
    prop: "ZYL",
    minwidth: "70",
  },
];
const xAxis = [
  {
    name: "月",
    type: "category",
    axisTick: {
      alignWithLabel: true,
    },
    // prettier-ignore
    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  },
];
const yAxis = [
  {
    name: "吨/小时",
    position: "left",
    alignTicks: true,
    minInterval: 1,
    axisLine: {
      show: true,
    },
    axisLabel: {
      formatter: "{value} ",
    },
  },
];
const date = new Date();
let month = date.getMonth() + 1;
const newyear = date.getFullYear();
const oldyear = date.getFullYear() - 1;
if (month < 10) month = `0${month}`;
const newoldyear = [oldyear + "", newyear + ""];
const chartscolor = ["#91CC75", "#73C0DE", "#FAC858", "#EE6666", "#7E9AD7"];
const chart1 = {
  color: ["#91CC75", "#7E9AD7", "#EE6666"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
    },
  },
  grid: {
    right: "20%",
  },
  legend: {
    data: newoldyear,
  },
  xAxis,
  yAxis,
  series: [],
};
import GradientColorCard from "@/components/card/GradientColorCard.vue";
import bzzyx from "./components/bzzyx.vue";
import scfe from "./components/scfe.vue";
import bwlyl from "./components/bwlyl.vue";
import TonsCard from "@/components/card/TonsCard.vue";
// eslint-disable-next-line no-unused-vars
import * as echarts from "echarts";
// 引入vue-echarts
import VChart from "vue-echarts";
export default {
  name: "Scsum",
  components: { GradientColorCard, TonsCard, VChart, bzzyx, scfe,bwlyl },
  data() {
    return {
      height,
      options1: {
        bind: {
          height: height - 10,
          style: { "margin-top": "0" },
        },
      },
      options2: {
        bind: {
          height: height - 10,
          style: { "margin-top": "0" },
          "cell-style": { textAlign: "center", padding: "0", border: "none" },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#fff !important",
            border: "none",
            padding: "0",
            "font-size": "11px",
            color: "#000",
          },
        },
      },
      columns1,
      zbdata: [],
      columns2,
      zblist: [],
      cardstyle: {
        backgroundColor: "#fff",
      },
      countData1: [
        {
          icon: "icon-lunchuan",
          unit: "万吨",
          color: "linear-gradient(200deg,RGB(124,207,250),RGB(72,108,225))",
          backgroundimage: require("@/assets/images/card-lanse.png"),
          name: "吞吐量",
          value: "0",
        },
        {
          icon: "icon-lunchuan",
          rightTop: "0%",
          unit: "万吨",
          color: "linear-gradient(200deg,RGB(255,156,162),RGB(255,108,118))",
          backgroundimage: require("@/assets/images/card-red.png"),
          name: "卸船-电厂",
          value: "0",
        },
        {
          icon: "icon-lunchuan",
          rightTop: "0%",
          unit: "万吨",
          color: "linear-gradient(200deg,#FED29D,#FF9953)",
          backgroundimage: require("@/assets/images/card-oragin.png"),
          name: "卸船-市场",
          value: "0",
        },
        {
          icon: "icon-lunchuan",
          rightTop: "0%",
          unit: "万吨",
          color: "linear-gradient(200deg,#72D2FB,#00C1F9)",
          backgroundimage: require("@/assets/images/card-qingse.png"),
          name: "卸船-内贸",
          value: "0",
        },
        {
          icon: "icon-lunchuan",
          rightTop: "0%",
          unit: "万吨",
          color: "linear-gradient(200deg,#ADA6F9,#7D76F6)",
          backgroundimage: require("@/assets/images/card-zise.png"),
          name: "卸船-外贸",
          value: "0",
        },
      ],
      jgList: [
        {
          name: "年度卸船",
          value: "0",
          value1: "0",
          value2: "0/0",
          xcl: "0",
          sc: "0",
          tb: "0",
          hb: "0",
        },
        { name: "年度汽运", value: "0", value1: "0" },
      ],
      sgList: [
        { name: "年度装船", value: "0", value1: "0", value2: "0" },
        { name: "年度火车", value: "0", value1: "0" },
        {
          name: "年度汽运",
          value: "0",
          value1: "0",
        },
        {
          name: "年度电厂",
          value: "0",
          value1: "0",
        },
      ],
      echartsHeight: 250,
      xcchart: JSON.parse(JSON.stringify(chart1)),
      hcchart: JSON.parse(JSON.stringify(chart1)),
      xclchart: JSON.parse(JSON.stringify(chart1)),
      nddcchart: JSON.parse(JSON.stringify(chart1)),
      VChartoptions: {
        // 91CC75  5470C6  EE6666
        color: chartscolor,
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return `${params.seriesName}<br/> ${params.name}：${this.$utils.fomatFloat(params.value,2)}万吨(${params.percent}%)`;
          },
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["装船", "火车", "汽运", "电厂"],
        },
        series: [
          {
            name: "出库方式",
            type: "pie",
            radius: "70%",
            center: ["50%", "45%"],
            data: [],
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{b} \n\n {d}%", // 模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
                textStyle: {
                  align: "center",
                  baseline: "middle",
                  fontFamily: "微软雅黑",
                  fontSize: 14,
                  // fontWeight: "bolder",
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.http.post({ serviceCode: "get_shipyearinfo",data: {}}).then(val => {
        console.log(val);
      })
      this.queryheader();
      this.querydrdc();
      this.queryxcxl();
      this.queryhcxl();
      this.querndxcl();
      this.querydcl();
    },
    queryheader() {
      this.$api.summary.get_shipyearinfo().then((val) => {
        const rf = 2;
        this.countData1[0].value = this.$utils.fomatFloat(val.TTLSJ, rf);
        this.countData1[1].value = this.$utils.fomatFloat(val.XCSJ, rf);
        this.countData1[2].value = this.$utils.fomatFloat(val.ZCKSJ, rf);
        this.countData1[3].value = this.$utils.fomatFloat(val.XCNMSJ, rf);
        this.countData1[4].value = this.$utils.fomatFloat(val.XCWMSJ, rf);

        const total = Number(val.XCSJ) + Number(val.ZCKSJ);
        const total1 = Number(val.XCNMSJ) + Number(val.XCWMSJ);
        this.countData1[1].rightTop =
          this.$utils.Percentage(val.XCSJ, total) + "%";
        this.countData1[2].rightTop =
          this.$utils.Percentage(val.ZCKSJ, total) + "%";
        this.countData1[3].rightTop =
          this.$utils.Percentage(val.XCNMSJ, total1) + "%";
        this.countData1[4].rightTop =
          this.$utils.Percentage(val.XCWMSJ, total1) + "%";
      });
    },
    querydrdc() {
      this.$api.summary.get_drdcinfo().then((val) => {
        const rf = 2;
        this.jgList[0].value = this.$utils.fomatFloat(val.drmap.XCSJ, rf);
        this.jgList[0].value1 = val.drmap.xc;
        this.jgList[0].value2 = val.drmap.xcsc;
        this.jgList[0].xcl = this.$utils.fomatFloat(val.drmap.dyxcl, rf);
        this.jgList[0].sc = val.drmap.byxcsc;
        this.jgList[0].hb = this.$utils.tbNumber(
          val.drmap.dyxcl,
          val.drmap.syxcl
        );
        this.jgList[0].tb = this.$utils.tbNumber(
          val.drmap.dyxcl,
          val.drmap.qndyxcl
        );

        this.jgList[1].value = val.drmap.QCJGSJ;
        this.jgList[1].value1 = val.drmap.drqy;

        this.sgList[0].value = this.$utils.fomatFloat(val.dcmap.ZCSJ, rf);
        this.sgList[0].value1 = val.dcmap.zc;
        this.sgList[0].value2 = val.dcmap.zcsc;
        this.sgList[1].value = this.$utils.fomatFloat(val.dcmap.HCSJ, rf);
        this.sgList[1].value1 = val.dcmap.hc;
        this.sgList[2].value = this.$utils.fomatFloat(val.dcmap.QCSJ, rf);
        this.sgList[2].value1 = val.dcmap.dcqy;
        this.sgList[3].value = this.$utils.fomatFloat(val.dcmap.DCSJ, rf);
        this.sgList[3].value1 = val.dcmap.dc;

        // 出库方式对比
        const ckobj = [
          { value: val.dcmap.ZCSJ, name: "装船" },
          { value: val.dcmap.HCSJ, name: "火车" },
          { value: val.dcmap.QCSJ, name: "汽运" },
          { value: val.dcmap.DCSJ, name: "电厂" },
        ];
        this.VChartoptions.series[0].data = ckobj;
      });
    },
    queryxcxl() {
      this.xcchart.tooltip.formatter = (p) => this.formatter(p, "吨/小时");
      this.$api.summary.get_ydxcxl().then((val) => {
        const obj = [
          {
            name: oldyear + "",
            type: "line",
            data: this.mapNull(val.qnxl, "XL"),
          },
          {
            name: newyear + "",
            type: "bar",
            data: this.mapNull(val.jnxl, "XL"),
          },
        ];
        this.xcchart.series = obj;
      });
    },
    queryhcxl() {
      this.hcchart.tooltip.formatter = (p) => this.formatter(p, "吨/小时");
      this.$api.summary.get_ydhcxl().then((val) => {
        const obj = [
          {
            name: oldyear + "",
            type: "line",
            data: this.mapNull(val.qnxl, "XL"),
          },
          {
            name: newyear + "",
            type: "bar",
            data: this.mapNull(val.jnxl, "XL"),
          },
        ];
        this.hcchart.series = obj;
      });
    },
    querndxcl() {
      this.xclchart.legend.data = [
        oldyear + "",
        newyear + "",
        newyear + "计划",
      ];
      this.xclchart.tooltip.formatter = (p) => this.formatter(p, "万吨");
      this.xclchart.yAxis[0].name = "万吨";
      this.$api.summary.get_ndxclinfo().then((val) => {
        const obj = [
          {
            name: oldyear + "",
            type: "line",
            data: this.mapNull(val.qnxcl, "TONS"),
          },
          {
            name: newyear + "",
            type: "bar",
            data: this.mapNull(val.jnxcl, "TONS"),
          },
          {
            name: newyear + "计划",
            type: "line",
            data: this.mapNull(val.jnxcljh, "TONS"),
          },
        ];
        this.xclchart.series = obj;
      });
    },
    querydcl() {
      this.nddcchart.color = chartscolor;
      this.nddcchart.legend.data = [
        "装船",
        "火车",
        "汽运",
        "电厂",
        oldyear + "",
      ];
      this.nddcchart.tooltip.formatter = (p) => this.formatter(p, "万吨");
      this.nddcchart.yAxis[0].name = "万吨";
      this.$api.summary.get_ndcklinfo().then((val) => {
        const obj = [
          {
            name: "装船",
            type: "bar",
            emphasis: { focus: "series" },
            stack: newyear,
            data: this.mapNull(val.jnckl, "ZCSJ"),
          },
          {
            name: "火车",
            type: "bar",
            emphasis: { focus: "series" },
            stack: newyear,
            data: this.mapNull(val.jnckl, "HCSJ"),
          },
          {
            name: "汽运",
            type: "bar",
            emphasis: { focus: "series" },
            stack: newyear,
            data: this.mapNull(val.jnckl, "QCSJ"),
          },
          {
            name: "电厂",
            type: "bar",
            emphasis: { focus: "series" },
            stack: newyear,
            data: this.mapNull(val.jnckl, "DCSJ"),
          },
          {
            name: oldyear + "",
            type: "line",
            data: this.mapNull(val.quckl, "TONS"),
          },
        ];
        this.nddcchart.series = obj;
      });
    },
    mapNull(data, filed) {
      return data.map((t) => {
        if (t[filed] === "0") {
          return "";
        }
        return t[filed];
      });
    },
    formatter(params, unit) {
      let relVal = params[0].name + "月";
      for (let i = 0, l = params.length; i < l; i++) {
        relVal += "<br/>" + params[i].marker;
        let v = "";
        if (params[i].value) {
          v = `${params[i].seriesName} ：${this.$utils.fomatFloat(params[i].value,2)}  ${unit}`;
        } else {
          v = "-";
        }
        relVal += v;
      }
      return relVal;
    },
    Percentage(a, e) {
      const zy = Number(e.zy);
      const gz = Number(e.gz);
      const kx = Number(e.kx);
      const total = zy + gz + kx;
      return this.$utils.Percentage(a, total);
    },
    jtclass(number) {
      return { xjt: Number(number) < 0, sjt: Number(number) > 0 };
    },
  },
};
</script>

<style lang="scss">
.jt {
  position: relative;
  display: none;
}

.xjt {
  transform: rotate(90deg);
  display: inline-block;
  color: rgb(80, 214, 47);
}

.sjt {
  transform: rotate(-90deg);
  display: inline-block;
  color: red;
  margin-left: -2px;
}

.chart {
  width: 110%;
}
.content {
  background-color: #f8f6f6cb;
  .header {
    display: flex;
    justify-content: space-between;
    &-color {
      display: flex;
      justify-content: space-between;
      width: 100%;
      .user-OrderCardColor {
        width: 17%;
      }
    }
  }
  .box1 {
    margin-top: 20px;
    .box1-card {
      height: 133px;
      display: flex;
      justify-content: space-between;
    }
    .box1-bar {
      width: 50%;
      border-left: 1px solid #eeecec;
      // padding: 16px 0 16px 20px;
      font-size: 15px;
      margin: auto;
      padding-left: 20px;
      &-item {
        color: #b5b5b5;
        /* margin-bottom: 10px; */
        line-height: 27px;
        .value {
          color: #409eff;
          margin-left: 10px;
          font-size: 17px;
          font-weight: 600;
        }
        .unit {
          font-size: 11px;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
